<template>
  <a-modal
    class="business-modal"
    title="选择供应商"
    :width="800"
    v-model="visible"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form class="mb20" :form="form" layout="inline">
      <a-form-item label="类型选择">
        <a-select
          style="width: 150px"
          placeholder="请选择"
          @change="selectChange"
          v-model="param.typeId"
          allowClear
        >
          <a-select-option v-for="item in typeData" :key="item.typeId">{{ item.type }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="供应商">
        <a-input placeholder="请输入名称" v-model="param.name" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="handleSearch">搜索</a-button>
      </a-form-item>
    </a-form>
    <a-table
      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: 'radio' }"
      :loading="loading"
      :columns="columns"
      :pagination="pagination"
      :dataSource="tableData"
      bordered
      :rowKey="record => record.id"
    ></a-table>
  </a-modal>
</template>

<script>
import { querySupplierType, allLinkInfo, getSupplierCodeCount } from '@/api/supplier'
import pick from 'lodash.pick'

export default {
  data() {
    return {
      visible: false,
      form: this.$form.createForm(this),
      typeData: [],
      selectValue: '',
      selectedRowKeys: [],
      selectedRows: [],
      loading: false,
      columns: [
        {
          title: '编码',
          align: 'center',
          dataIndex: 'id'
        },
        {
          title: '供应商名称',
          align: 'center',
          dataIndex: 'name'
        }
      ],
      pagination: {
        total: 0,
        defaultPageSize: 10,
        showSizeChanger: true,
        pageSizeOptions: ['5', '10', '15', '20'],
        onChange: current => {
          this.currentChange(current)
        },
        onShowSizeChange: (current, pageSize) => {
          this.sizeChange(current, pageSize)
        }
      },
      tableData: [],
      param: {
        typeId: null,
        name: null
      },
      queryParam: {
        pageSize: 10,
        pageNo: 1
      }
    }
  },
  mounted() {
    this.form.setFieldsValue(pick(this.param, 'typeId', 'name'))
    querySupplierType().then(res => {
      console.log('querySupplierType res', res)
      this.typeData = res.data
    })
  },
  methods: {
    edit() {
      console.log('eidt=======')
      this.visible = true
    },
    handleCancel() {
      this.visible = false
    },
    async handleOk() {
      console.log('ok', this.selectedRows)
      const res = await getSupplierCodeCount({ supplierCode: this.selectedRows[0].id })
      console.log('res', res)
      if (res.state === '000000' && res.data) {
        this.$emit('getSupplier', this.selectedRows)
        this.visible = false
        this.param.typeId = null
        this.param.name = null
        this.selectedRows = []
        this.selectedRowKeys = []
      } else {
        this.$message.error('该供应商已存在，请选择其他供应商')
      }
    },
    selectChange(value) {
      this.param.typeId = value
    },
    handleSearch() {
      if (this.param.typeId || this.param.name) {
        console.log('param', this.param)
        this.getList(this.param)
      } else {
        this.$message.error('请至少选定一个搜索条件')
      }
    },
    async getList(param = {}) {
      this.loading = true
      const res = await allLinkInfo({ ...this.queryParam, ...param })
      console.log('res', res)
      if (res) {
        const { state, data } = res
        if (data.records.length > 0) {
          const { records, total } = data
          this.tableData = records
          this.pagination.total = total
        } else {
          this.tableData = []
          this.pagination.total = 0
        }
      } else {
        this.tableData = []
        this.pagination.total = 0
      }
      console.log('tableData', this.tableData)
      this.loading = false
    },
    currentChange(current) {
      this.queryParam.pageNo = current
      this.getList()
    },
    sizeChange(current, pageSize) {
      this.queryParam.pageNo = 1
      this.queryParam.pageSize = pageSize
      this.getList()
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      console.log('selectedRowKeys changed: ', selectedRowKeys, selectedRows)
      this.selectedRows = selectedRows
      this.selectedRowKeys = selectedRowKeys
    }
  }
}
</script>

<style>
</style>